/**
 * @author:bjzhang
 * Created by MingIr on 2017/1/12.
 */

import React,{Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableHighlight,
    TouchableOpacity
}
from 'react-native';
export default class PFooter extends Component{
    constructor(props){
        super(props);
        this.state = {
            currentPage:''
        };
    }
    componentWillMount(){
        // console.log(1);
        if(!this.props.onFindChest) this.setState({ currentPage:'hunt' });
        else if(!this.props.onMine) this.setState({ currentPage:'mine'});
        else if(!this.props.onMessage) this.setState({ currentPage:'msg'});
    }
    newChestNav(){
        typeof this.props.onNewChest == 'function' && this.props.onNewChest();
    }
    findChestNav(){
        typeof this.props.onFindChest == 'function' && this.props.onFindChest();
        // this.props.navigation.navigate('MineChests')
    }
    partyNav(){
        alert('功能正在建设中...');
    }
    mineNav(){
        typeof this.props.onMine == 'function' && this.props.onMine();
        // this.props.navigation.navigate('MineChests');
    }
    messageNav(){
        typeof this.props.onMessage == 'function' && this.props.onMessage();
        // this.props.navigation.navigate('MineConversations')
    }
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.cell}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.findChestNav.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_xiuxiu.png')}/>
                    </TouchableOpacity>
                    <View style={[styles.sel_menu,{display:this.state.currentPage == 'hunt' ? 'flex':'none'}]}><Text>●</Text></View>
                </View>
                <View style={styles.cell}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.messageNav.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_message.png')}/>
                    </TouchableOpacity>
                    <View style={[styles.sel_menu,{display:this.state.currentPage == 'msg' ? 'flex':'none'}]}><Text>●</Text></View>
                </View>
                <View style={styles.cell}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.newChestNav.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_add.png')}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.cell}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.partyNav.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_party.png')}/>
                    </TouchableOpacity>
                    <View style={[styles.sel_menu,{display:this.state.currentPage == 'party' ? 'flex':'none'}]}><Text>●</Text></View>
                </View>
                <View style={styles.cell}>
                    <TouchableOpacity activeOpacity={.7} onPress={this.mineNav.bind(this)}>
                        <Image source={require('../../icon/menu/menu_icon_mind.png')}/>
                    </TouchableOpacity>
                    <View style={[styles.sel_menu,{display:this.state.currentPage == 'mine' ? 'flex':'none'}]}><Text>●</Text></View>
                </View>
            </View>
        );
    }
}

const styles = {
    container:{
        flexDirection:'row',
        backgroundColor:'#fff',
        height:49,
        borderTopWidth:.4,
        borderTopColor:'#E6E6E6'
    },
    cell:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'transparent',
        height:49,
    },
    sel_menu:{
        flex:1,
        position:'absolute',
        bottom:-2,
    }
}